<template>
  <div class="evaluate">
    <div style="width:100%;height:180px;"></div>
    <div style="width:85%;margin:0 auto;">
      <el-card class="shop_name">
        <div class="evaluate_first" style="display:flex;">
          店铺名称：{{shop_name}}
        </div>
      </el-card>
      <el-card class="shop_name">
        <div class="evaluate_first" style="display:flex;flex-direction: column;">
          <span v-copy="order_id">订单号：{{order_id}}</span>
        </div>
      </el-card>
      <el-card class="shop_name">
        <div class="evaluate_first" style="display:flex;align-items:center;font-size:16px;text-align: left;">
          <span style="width:100%;">评价内容:{{data.title}}</span>
          <el-button class="tag-read" type="success" size="mini" @click="copygz">复制</el-button>
        </div>
      </el-card>
      <el-card class="shop_name" v-if="imgs.length>0">
        <div class="evaluate_first" @click="img_change" style="display: flex;align-items: center;margin:10px 0;font-size: 16px;">
          <span>评价图片(长按保存图片)：</span>
          <van-image-preview v-model="showFlag" :images="imgs">
          </van-image-preview>
          <div class="four_imgs" v-if="imgs.length>0">
            <img v-for="(item,index) in imgs" :index="index" :src="item" alt="" style="width:100px;height:100px;margin-left:10px;">
          </div>
        </div>
        <span style="color:red;font-size:16px;font-weight:600;">商家未上传主图,即可仅上传评价内容</span>
      </el-card>
      <div style="display:flex;justify-content: center;margin-top:40px;">
        <el-button type="primary" @click="show = true">上传截图</el-button>
      </div>
    </div>
    <van-dialog v-model="show"
                width="90%" :showCancelButton="true" showConfirmButton @cancel="show = false" @confirm="submit_evaluate">
      <div style="display:flex;height:200px;align-items:center;margin-left:20px;justify-content:flex-start;">
        <span>上传图片：</span>
        <el-upload
          class="upload-demo"
          :headers="importHeaders"
          action="/api/v1/PI/task/evaluate_img"
          :on-success="handlesuccess"
          v-show="image==''"
          multiple>
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <viewer>
          <img :src="image" alt="" style="width:100px;height:100px;" v-show="image!=''">
        </viewer>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {evaluate_get, evaluate_post} from '../api/api';
  import aestool from '../utils/aestool.js';
  import Clipboard from "clipboard";
  export default {
    data() {
      return {
        show:false,
        data: {},
        image: "",
        shop_name: '',
        importHeaders: {token: localStorage.getItem('xfq_token')},
        showFlag: false,
        imgs:[],
        goods_img:'',
        order_id:""
      }
    },
    created() {
      this.gettaskdata()
    },
    mounted() {
       this.order_id = this.$route.query.order_Id
    },
    methods: {
      handlesuccess(val) {
        this.image = val.UrlImg
      },
      //复制
      copygz() {
        let _this = this;
        var clipboard = new Clipboard(".tag-read", {
          text: function () {
            return _this.data.title
          }
        });
        clipboard.on("success", e => {
          _this.$message({
            message: "复制成功",
            type: "success"
          });
          clipboard.destroy();
        });
        clipboard.on("error", e => {
          _this.$message({
            message: "复制失败",
            type: "error"
          });
          clipboard.destroy();
        });
      },
      //放大图片
      img_change() {
        this.showFlag = true;
      },
      onCopy(e) {
        this.$toast('复制成功！')
      },
      onError(e) {
        this.$toast('复制失败！')
      },
      gettaskdata() {
        let params = {
          baby_id:aestool.encrypt(this.$route.query.baby_id,'SyncorderzxPjGet'),
          task_id:aestool.encrypt(this.$route.query.id,'SyncorderzxPjGet')
        }
        evaluate_get(params).then(res=>{
          if(res.Status ==200){
            let tempdata = JSON.parse(aestool.decrypt(res.Data,'SyncorderzxPjGet'))
            console.log('评论数据',tempdata)
            this.data =tempdata
            this.shop_name = this.data.task_shopname
            this.goods_img = this.data.goods_img
            this.imgs =JSON.parse(this.data.imgs)
          }else{
            this.$toast(res.Message)
          }
        })
      },
      update_evaluate() {
        console.log("重新获取评价")
      },
      submit_evaluate() {
        if(this.image != ''){
          let params = {
            cancel_task: aestool.encrypt(this.$route.query.id, 'CancelTaPjSubmit'),
            img:aestool.encrypt(this.image, 'CancelTaPjSubmit'),
          }
          evaluate_post(params).then(res => {
            if (res.Status == 200) {
              this.$toast(res.Message)
              setTimeout(() => {
                this.$router.push('/home')
              }, 2000)
            } else {
              this.$toast(res.Message)
            }
          })
        }else{
          this.$toast('请先上传评价截图')
        }
      },
    }
  }
</script>

<style lang="stylus">
  .evaluate {
    width: 100%
    height 100%
    background url("../assets/touxiang.png")
    background-size 100% 100%
    margin: 0 auto
    overflow-y scroll
  }
  .shop_name{
     margin-bottom 20px
  }
  .evaluate_first {
    text-align: center;
    font-size: 16px;
  }

  .evaluate_second {
    margin-bottom 10px
    font-size: 20px;
    text-align: center;
    font-weight: 600;
  }

  .evaluate_third {
    span {
      display block
      text-indent: 1em;
      font-size: 16px;
    }

    .third_title {
      margin 15px 0
      box-shadow: 0px -1px 10px 0.5px #ccc;
      text-align left
      padding: 7px
      display: block;
    }

    .btcopy {
      font-size: 16px;
      background: #07c160;
      border: none;
      color: #fff;
      width: 100px;
      border-radius: 5px;
    }
  }

  .evaluate_four {
    border-top: 1px solid #6b7786;
    padding-top 10px
    margin-top 20px
    text-align center
    font-size 20px

    .four_imgs {
      margin-top 10px
      display: flex;
      width: 100%;
      justify-content: space-around;
    }

    img {
      width 120px
      height 120px
    }
  }

  .evaluate_five {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    margin-bottom: 40px;
    /*border-top:1px solid #6b7786;*/
    margin-top 20px
    font-size 16px

    button {
      color #fff
      border none
      border-radius 5px
    }
  }

</style>


